<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非单文件组件-组件的嵌套</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <div id="root">
    </div>

</body>
<script type="text/javascript">

     //定义student组件
     const student = Vue.extend({
        template:`
        <div>
            <h2>学生姓名：{{name}}</h2>
            <h2>学生年龄：{{age}}</h2>
        </div>
        `,
        data(){
            return {
                name:'青少年',
                age: 18
            }
        }
    })

    //定义school组件
    const school = {
        name:'xuexiao',
        template:`
        <div>
            <h2>学校名称：{{schoolName}}</h2>
            <h2>学校地址：{{schoolAddress}}</h2>
            <student></student>
        </div>
        `,
        data(){
            return {
                schoolName:'国防科技大学',
                schoolAddress:'中国'
            }
        },
        components:{
            student
        }
    }
    
     //定义hello组件
     const hello = {
        template:`
        <div>
            <h2>{{msg}}</h2>
        </div>
        `,
        data(){
            return {
                msg:'欢迎来到国防科技大学学习'
            }
        }
    }

    //定义app组件
    const app = {
        template:`
        <div>
            <hello></hello>
            <school></school>
        </div>
        `,
        components:{
            hello,
            school
        }
    }

    const vm = new Vue({
        template:'<app></app>',
        el: '#root',
        // 第二步：注册组件
        components:{
            app
        }
    })
</script>

</html>